<template>
  <div style="height: 100%;">

    <router-view class="dth-content weui-tab__panel vux-fix-safari-overflow-scrolling dth-m-60"></router-view>

    <tabbar>
      <tabbar-item link="/wholesale"  :selected="route === '/wholesale' || route === '/'">
        <img slot="icon" src="./../../assets/home/home.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item show-dot link="/wholesale/goodslist" :selected="route === '/wholesale/goodslist'">
        <img slot="icon" src="./../../assets/home/list.png">
        <span slot="label">分类</span>
      </tabbar-item>
      <tabbar-item link="/component/demo">
        <img slot="icon" src="./../../assets/home/shopping.png">
        <span slot="label">购物车</span>
      </tabbar-item>
      <tabbar-item :selected="route.path === '/project/donate'">
        <img slot="icon" src="./../../assets/home/me.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>

  </div>

</template>
<script>
  import { Tabbar, TabbarItem, Group, Cell } from 'vux'

  export default {
    components: {
      Tabbar,
      TabbarItem,
      Group,
      Cell
    },
    data () {
      return {
        route: this.$route.path
      }
    }
  }
</script>

<style lang="less">

  body {
    background-color: #fbf9fe;
  }
  html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  .dth-content{
    padding-bottom: 50px
  }
  .dth-m-60{
    margin-bottom: 60px;
  }
</style>
